<template>
	<div class="loginFrBox" >
		<bgCanvas></bgCanvas>
		<div class="loginBox">
			<div class="loginHeader">
				<!-- 无锡智慧市民中心电梯管理平台 -->
				<div class="bigTit">{{messageTit}}</div>
			</div>
			<div class="loginCenter">
				<div class="centerBg"></div>
				<div class="centerLogin">
					<el-form :rules="rules" :model="ruleForm" ref="ruleForm">
						<div class="centerHeader">用户登陆</div>
						<div class="centerContent">
							<div class="centContentBest">
								<el-row :gutter="20">
									<el-col :span="24">
										<el-form-item prop="userName">
											<el-input placeholder="请输入用户名" v-model.trim="ruleForm.userName" clearable>
												<i slot="prefix" class="el-input__icon el-icon-user"></i>
											</el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="20">
									<el-col :span="24">
										<el-form-item prop="pwd">
											<el-input type="password" placeholder="请输入密码" v-model.trim="ruleForm.pwd" clearable @keyup.enter.native="login('ruleForm')">
												<i slot="prefix" class="el-input__icon el-icon-lock"></i>
											</el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="20" style='display: flex;align-items: center;'>
									<el-col :span="17">
										<el-form-item prop="des">
											<el-input placeholder="请输入验证码" v-model="ruleForm.des" clearable @keyup.enter.native="login('ruleForm')">
												<i slot="prefix" class="el-input__icon el-icon-folder-checked"></i>
											</el-input>
										</el-form-item>
									</el-col>
									<el-col :span="7">
										<img :src="url" alt="" v-loading='imgLoading' @click='checkCode' style="width: 100%;cursor: pointer;">
									</el-col>
								</el-row>
								<el-row :gutter="20">
									<el-col :span="24">
										<el-button type="primary" @click='login("ruleForm")'>登录</el-button>
									</el-col>
								</el-row>
							</div>
							<div class="centetBottom">
								<span class="shenBlue cursor">注册账号</span>
								<span class="eleBlueColor cursor">忘记密码</span>
							</div>
						</div>
					</el-form>
				</div>
			</div>
			<div class="loginBottom">
				<div class="lastBottom">{{copyRrite}}</div>
				<div>建议浏览器：IE9以上、FireFox v22、Chrome 50+ {{beiAn}}</div>
			</div>
		</div>
		<transition name="el-fade-in-linear">
			<div class="recodeMask" v-show="recodeShow" @click="recodeMaskHide">
				<div class="recodeMaskSon">
					<div style="color: #fff;" class="recodeDes"><i></i>梯联网平台</div>
					<img src="../assets/loginImg/reCode.png" alt="" class="recordImg">
				</div>
			</div>
		</transition>
		<div class="bottomMask" @mouseover='recodeShowMask'>
			<img src="../assets/loginImg/sqcBig.png" alt="">
			<span>扫码下载维保平台APP</span>
		</div>
	</div>
</template>

<script>
	import bgCanvas from "@/components/LoginCom/bgCanvas"
	import {
		axiosPost,
		axiosGet,
		loadFn,
		AllLoading,
	} from "@/common.js"
	export default {
		components: {
			bgCanvas
		},
		mounted() {
			if (this.isLogin) {
				this.$router.push({
					name: 'MainView'
				})
			}
			this.checkCode()
		},
		data() {
			return {
				recodeShow: false,
				url: require('../assets/loginImg/loginBg.png'),
				ruleForm: {
					userName: '',
					pwd: '',
					des: ''
				},
				code_id: '',
				imgLoading: false,
				rules: {
					userName: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 12,
							message: '用户名长度在 5 到 12 个字符',
							trigger: 'blur'
						}
					],
					pwd: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 4,
							max: 20,
							message: '密码长度在 4 到 20 个字符',
							trigger: 'blur'
						}
					],
					des: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}, ],

				},
				messageTit: '梯联网管理平台',
				copyRrite: '版权信息：无锡惠成信息技术有限公司',
				beiAn: '备案号：苏ICP备14058844号',
				loadingShow:true
			}
		},
		computed: {
			isLogin() {
				if (localStorage.company_name) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			recodeShowMask() {
				this.recodeShow = true
			},
			recodeMaskHide() {
				this.recodeShow = false
			},
			//切换登陆图形码
			checkCode() {
				this.imgLoading = true
				axiosGet('/user/picture/', {}, (res) => {
					this.loadingShow = false
					if (res.code == 0) {
						this.messageTit  = res.detail.platform 
						this.copyRrite = res.detail.copyright 
						this.beiAn  =  res.detail.record_number
						document.title = this.messageTit
						localStorage.newTitle = JSON.stringify({name:res.detail.platform})
						if(res.detail.logo){
							localStorage.logoUrl = JSON.stringify({url:res.detail.logo})
						}
						if(res.detail.logo_ico){
							localStorage.logoUrlIco = JSON.stringify({url:res.detail.logo_ico})
						}
						this.url = res.detail.code
						this.code_id = res.detail.code_id
					} else {
						this.$message.error(res.detail.result)
					}
					this.imgLoading = false
				})
			},
			//登录
			login(ruleForm) {
				this.$refs[ruleForm].validate((valid) => {
					if (valid) {
						loadFn()
						let data = {
							username: this.ruleForm.userName,
							pwd: this.ruleForm.pwd,
							code_id: this.code_id,
							code: this.ruleForm.des
						}
						axiosPost('/user/login/', data, (res) => {
							console.log(res)
							AllLoading.close()
							if (res.code == 0) {
								this.$refs[ruleForm].resetFields();
								localStorage.company_name = JSON.stringify({
									name: res.detail.company_name
								})
								localStorage.all_elevator_count = JSON.stringify({
									count: res.detail.elevator_count
								})
								localStorage.all_access_count = JSON.stringify({
									count: res.detail.company_count
								})
								localStorage.all_today_fault = JSON.stringify({
									count: res.detail.authority_count
								})
								localStorage.company_id = JSON.stringify({
									id: res.detail.company_id
								})
								localStorage.username = JSON.stringify({
									name: res.detail.username
								})
								localStorage.role = JSON.stringify({
									id: res.detail.role
								})
								localStorage.roleId = JSON.stringify({
									id: res.detail.id
								})
								localStorage.pt = JSON.stringify({
									list: res.detail.pt
								})
								localStorage.web = JSON.stringify({
									title: res.detail.web
								})
								localStorage.tags = JSON.stringify({
									"list": [{
										"label": "平台概况",
										"isColor": 1,
										"pathIndex": "/MainView/Summarize"
									}]
								})
								this.$router.push({
									name: 'Summarize'
								})
								// if (res.detail.role == 0) {
								// 	
								// } else {
								// 	localStorage.tags = JSON.stringify({
								// 		"list": [{
								// 			"label": "维保概况",
								// 			"isColor": 1,
								// 			"pathIndex": "/MainView/OldStatistics"
								// 		}]
								// 	})
								// 	this.$router.push({
								// 		name: 'OldStatistics'
								// 	})
								// }
							} else {
								this.checkCode()
								this.$message({
									type: 'error',
									message: res.detail.result
								})
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style scoped lang="less">
	.loginBox {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 111;
		width: 75%;
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		// background: #fff;

		.loginHeader {
			width: 100%;
			height: 16%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #fff;
			margin-bottom: 1%;

			.smallTit {
				letter-spacing: 5px;
				font-size: 30px;
			}

			.bigTit {
				font-size: 45px;
				letter-spacing: 5px;
				font-weight: 600;
			}
		}

		.loginCenter {
			width: 100%;
			height: 330px;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;

			.centerBg {
				width: 800px;
				background: url(../assets/loginImg/loginBg.png) no-repeat 0 0;
				background-size: cover;
				height: 100%;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
				margin-right: 10px;
			}

			.centerLogin {
				width: 400px;
				background: #e9eef2;
				height: 100%;
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;

				.centerHeader {
					width: 100%;
					height: 15%;
					color: #0559af;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid #ccc;
					font-weight: 550;
					font-size: 22px;
				}

				.centerContent {
					width: 100%;
					height: 85%;
					padding: 5px 15px;
					box-sizing: border-box;

					.centContentBest {
						height: 90%;
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}

					.centetBottom {
						width: 100%;
						height: 5%;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						font-size: 13px;
						// margin-top: 10px;
					}
				}
			}
		}

		.loginBottom {
			width: 100%;
			height: 10%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 20px;

			div {
				color: #ccc;
			}

			.lastBottom {
				margin-bottom: 10px;
			}
		}
	}

	.shenBlue {
		color: #0559af;
	}

	.recodeMask {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 111;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(50, 50, 50, .5);

		.recodeMaskSon {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.recodeDes {
				display: flex;
				align-items: center;
				font-size: 16px;

				i {
					display: inline-block;
					width: 20px;
					height: 20px;
					background: url(../assets/loginImg/anz.png) no-repeat 0 0;
					background-size: cover;
					margin-right: 5px;
				}
			}

			.recordImg {
				width: 200px;
				height: 200px;
				margin-top: 5px;
			}
		}
	}

	.bottomMask {
		position: absolute;
		right: 15px;
		bottom: 15px;
		z-index: 111;
		display: flex;
		align-items: center;
		color: #fff;

		span {
			display: flex;
			width: 80px;
			font-size: 13px;
		}

		img {
			width: 30px;
			height: 30px;
			margin-right: 5px;
		}
	}
</style>
